<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="/config/permission">权限管理</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Row :gutter="16">
		    		<ICol span="6"><IButton v-if="$store.getters.per.config_permission_create" type="primary" @click="$refs.update.modal=true">添加新权限</IButton></ICol>
		    		<ICol span="6" offset="11"><Search :callback="resetTable"></Search></ICol>
		    	</Row>
		    	<BaseTable ref="table" :url="table.url" :header="table.header" ></BaseTable>
		    </div>
		</div>
		<Update ref="update" :callback="resetTable"></Update>
	</div>
</template>
<script>
import {Row,Col,Breadcrumb,Button} from 'iview';

import BaseTable  from 'admin/components/table/base';
import Update from 'admin/components/config/permission/update';
import Search from 'admin/components/config/permission/search';

export default{
	components:{
		Row,
        'ICol':Col,
        Breadcrumb,
        'BreadcrumbItem' : Breadcrumb.Item,
        BaseTable,
        'IButton':Button,
        Update,
        Search,
    },
    data () {
        return {
        	table:{
        		url : '/config/permission/view/list',
        		header: []
        	},
        }
    },
    methods:{
    	resetTable(param){
    		this.$refs.table.tableData(param);
    	},
    },
    created:function(){
    	this.table.header =  [
            {
		        title: '权限(唯一)',
		        key: 'name'
		    },
		    {
		        title: '名称',
		        key: 'displayName'
		    },
		    {
		        title: '描述',
		        key: 'description'
		    },
		    {
		        title: '操作',
		        key: 'action',
		        width: 150,
		        align: 'center',
		        render: (h, params) => {
		            return h('div', [
		            	!this.$store.getters.per.config_permission_update ? '' :
		                h(Button, {
		                    props: {
		                        type: 'primary',
		                        size: 'small'
		                    },
		                    style: {
		                        marginRight: '5px'
		                    },
		                    on: {
		                        click: () => {
		                        	var update = this.$refs['update'];

		                        	this.Axios.Config.Permission.Get(params.row.id)
						            .then(res =>{
						                if(!res) return false;
						                update.form.id = params.row.id;
						                update.form.name = params.row.name;
						                update.form.displayName = params.row.displayName;
						                update.form.description = params.row.description;
						                update.modal = true;
						            })
		                        }
		                    }
		                }, '编辑'),
		                !this.$store.getters.per.config_permission_delete ? '' :
		                h(Button, {
		                    props: {
		                        type: 'error',
		                        size: 'small'
		                    },
		                    on: {
		                        click: () => {
		                        	this.$Modal.confirm({
					                    title: '你确定要删除吗？',
					                    content: '一旦删除无法恢复',
					                    onOk: () => {
					                        this.Axios.Config.Permission.Del(params.row.id)
								            .then(res =>{
								               	if(!res) return false;
								               	this.$refs.table.tableRowDel = true;
								                this.resetTable();
								            })
					                    }
					                });
		                        }
		                    }
		                }, '删除')
		            ]);
		        }
		    }
        ];
    },
    mounted:function(){
    	this.$store.dispatch('CHANGE_ROUTE',{name:'权限管理',route:'/config/permission',action:1,closable:true});
    }
}
</script>